<template>
	<view class="search">
		<view class="search-box">
			<view class="input">
				<image :src="searhIcon" mode=""></image>
				<input type="text" v-model="search" placeholder="搜索热门壁纸" />
			</view>
			<image :src="phoneIcon" mode=""></image>
		</view>
	</view>
</template>

<script>
	import {phone_icon, search_icon } from '@/static/svg/index.js'
	export default {
		name: 'Search',
		data() {
			return {
				searhIcon: search_icon,
				phoneIcon: phone_icon,
				search: null, //搜搜
			};
		}
	}
</script>

<style lang="less" scoped>
	.search {
		position: fixed;
		left: 0;
		top: 0;
		z-index: 2;
		width: 100%;
		height: 208upx;
		box-sizing: border-box;
		padding-top: 88upx;
		padding-bottom: 40upx;
		background-color: #FFFFFF;
		.search-box {
			display: flex;
			flex-direction: row;
			align-items: center;
			padding-left: 40upx;
			.input {
				width: 582upx;
				height: 80upx;
				box-sizing: border-box;
				line-height: 40upx;
				border-radius: 40upx;
				background-color: rgba(245, 245, 245, 100);
				color: rgba(213, 213, 213, 100);
				margin-right: 40upx;
				padding-left: 20upx;
				display: flex;
				flex-direction: row;
				align-items: center;
				image {
					width: 40upx;
					height: 40upx;
				}
				input {
					padding-left: 16upx;
				}
			}
			image {
				width: 48upx;
				height: 48upx;
			}
		}
	}

</style>
